<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="static/index.css">
    <script type="text/javascript" src="static/qs.min.js"></script>
    <title>案例管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            background: #00499e;
        }

        #app {
            padding: 20px;
            border: 15px solid #00499e;
            background: white;
            border-radius: 25px;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            box-sizing: border-box;
            font-size: 14px;
            overflow-y: auto;
        }

        #app.isPc {
            height: auto;
        }

        .primary {
            color: #409EFF;
        }

        .page-header {
            color: #333;
            margin-left: -10px;
            margin-bottom: 10px;
            font-size: 16px;
            text-align: center;
            flex-shrink: 0;
        }

        .mobile-table {
            flex: 1;
            height: 96%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 10px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            font-size: 13px;
            margin-bottom: 2px;
        }

        .mobile-card {
            margin-bottom: 20px;
            position: relative;
        }

        .mobile-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            line-height: 24px;
            margin-bottom: 10px;
        }

        .mobile-right {
            float: right;
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }

        .mobile-row .el-col {
            margin-top: 10px;
        }

        .pc-pagination {
            padding: 10px;
            text-align: right;
        }

        .tips {
            color: #aaa;
            font-size: 14px;
            line-height: 20px;
            height: 20px;
            text-align: center;
        }

        .tips i {
            font-size: 20px;
        }

        .detail {
            font-size: 12px;
            color: #dedede;
            margin-top: 10px;
            margin-bottom: -10px;
            text-align: center;
        }

        .el-message-box {
            width: 80%;
            max-width: 400px;
        }

        .el-dialog {
            max-width: 600px;
        }

        .form-input, .form-select {
            width: 100%;
        }

        .card-selected {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 20px;
            color: #aaa;
        }

        .selected {
            color: #1279ff;
        }
    </style>
</head>

<body>
<div id="app" :class="{isPc: !isMobile}">
    <div class="page-header">
        <i v-if="!editStatus" style="float: left;font-size: 20px;color:#1379ff;margin-left: 22px;cursor:pointer;"
           @click="back"
           class="el-icon-back"></i>
        <i v-if="isMobile && !editStatus" style="float: left;font-size: 20px;color:#1379ff;margin-left: 10px;"
           @click="edit('add')"
           class="el-icon-plus"></i>
        <span v-if="editStatus" style="float: left;font-size: 16px;color:#1379ff;margin-left: 10px;"
              @click="cancelEdit">取消</span>
        <i class="el-icon-document" style="margin-right: 10px;color: #1279ff;"></i>{{title}}
        <i v-if="isMobile && !editStatus" style="float: right;font-size: 20px;color:#1379ff;margin-left: 15px;"
           @click="editStatus=true;selection = []"
           class="el-icon-more-outline"></i>
        <i v-if="isMobile && !editStatus" style="float: right;font-size: 20px;color:#1379ff;"
           @click="visible=true"
           class="el-icon-cold-drink"></i>
        <i v-if="editStatus" style="float: right;font-size: 20px;color:#1379ff;margin-left: 10px;"
           class="el-icon-setting" @click="openSettingDialog"></i>
    </div>
    <el-row :gutter="20" v-if="!isMobile">
        <el-form ref="form" size="small" label-width="100px" label-position="right">
            <el-col :span="6">
                <el-form-item prop="pageparm" :label="formMap['pageparm']">
                    <el-select class="form-select" v-model="params.pageparm" placeholder="请选择项目名称" clearable>
                        <el-option v-for="xx of projectCodes" :key="xx.xmdm" :value="xx.xmdm"
                                   :label="xx.xmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item prop="alzt" :label="formMap['alzt']">
                    <el-select class="form-select" v-model="params.alzt" placeholder="请选择案例状态" clearable>
                        <el-option v-for="xx of types.alzts" :key="xx.dmdm" :value="xx.dmdm"
                                   :label="xx.dmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item prop="qxdm" :label="formMap['qxdm']">
                    <el-cascader
                            :show-all-levels="false"
                            class="form-select" clearable
                            v-model="params.qxdm"
                            placeholder="请选择案例区县"
                            @change="handleChange"
                            :options="types.qxdms"
                            :props="{label: 'dmmc', value: 'dmdm', emitPath: false}"></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item prop="xxdm" :label="formMap['xxdm']">
                    <el-select :disabled="!params.qxdm" class="form-select" v-model="params.xxdm" clearable
                               placeholder="请选择案例所属学校">
                        <el-option v-for="xx of types.xxdms" :key="xx.dmdm" :value="xx.dmdm"
                                   :label="xx.dmmc"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24" align="right">
                <el-button type="primary" size="small" @click="handleSubmit">查询</el-button>
                <el-button type="info" size="small" @click="handleSet">重置</el-button>
                <el-button type="primary" size="small" @click="openSettingDialog" icon="el-icon-setting">设置</el-button>
                <el-button type="primary" size="small" @click="edit('add')">新建</el-button>
            </el-col>
        </el-form>
    </el-row>
    <div class="pc-table" v-if="!isMobile" v-loading="loading">
        <el-table :data="list" stripe @select="selectRow" @select-all="selectRow">
            <el-table-column type="selection" width="50px"></el-table-column>
            <el-table-column prop="almc" label="案例名称"></el-table-column>
            <el-table-column prop="xmdm" label="项目名称"></el-table-column>
            <el-table-column prop="alzt" label="案例状态"></el-table-column>
            <el-table-column prop="qxdmmc" label="案例区县名称"></el-table-column>
            <el-table-column prop="xxdmmc" label="案例学校名称"></el-table-column>
            <el-table-column prop="xuxm" label="用户姓名"></el-table-column>
            <el-table-column prop="xtime" label="更新时间"></el-table-column>
            <el-table-column prop="alzt" label="案例材料">
                <template slot-scope="scope">
                    <el-button type="text" size="text" @click="goDocument(scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button type="primary" size="mini" @click="edit('show', scope.row)">详情</el-button>
                        <el-button type="primary" size="mini" @click="edit('modify', scope.row)"
                                   icon="el-icon-edit-outline"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete"
                                   @click="deleteCase(scope.row)"></el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <div class="pc-pagination">
            <el-pagination @current-change="changePage" background layout="prev, pager, next"
                           :current-page.sync="params.page" :total="params.total"></el-pagination>
        </div>
    </div>
    <div class="mobile-table" v-else v-infinite-scroll="loadData" infinite-scroll-disabled="disabled">
        <el-card v-for="(item, index) of list" :key="index" class="mobile-card" @click.native="handleClickCard(item)">
            <i class="el-icon-success card-selected" v-if="editStatus" :class="{selected: item.selected}"></i>
            <div class="mobile-name">{{item.almc}}</div>
            <el-row class="mobile-row">
                <el-col :span="12" v-if="item.xmmc">
                    {{item.xmmc}}
                    <!--                    项目名称:-->
                </el-col>
                <el-col :span="12" v-if="item.alzt">
                    <i class="el-icon-table-lamp primary"></i> {{item.alzt}}
                </el-col>
                <el-col :span="12" v-if="item.qxdmmc">
                    <i class="el-icon-location-information primary"></i> {{item.qxdmmc}}
                </el-col>
                <el-col :span="12" v-if="item.xxdmmc">
                    <i class="el-icon-school primary"></i> {{item.xxdmmc}}
                </el-col>
                <el-col :span="12"><i class="el-icon-user primary"></i> {{item.xuxm}}</el-col>
                <el-col :span="12"><i class="el-icon-time primary"></i> {{item.xtime}}</el-col>
            </el-row>
            <div style="text-align: right;margin-top: 15px;" v-if="!editStatus">
                <el-button type="text" size="mini" style="float: left;" @click.prevent.stop="goDocument(item)">查看案例材料
                </el-button>
                <el-button v-if="right.M" type="primary" plain size="mini"
                           @click.prevent.stop="edit('modify', item)"
                           icon="el-icon-edit-outline"></el-button>
                <el-button v-if="right.D" type="danger" plain size="mini" icon="el-icon-delete"
                           @click.prevent.stop="deleteCase(item)"></el-button>
            </div>
        </el-card>
        <div v-if="loading" class="tips"><i class="el-icon-loading"></i></div>
        <div v-if="noMore && !loading" class="tips">—— 我也是有底线的 ——</div>
    </div>
    <el-dialog :visible.sync="visible" width="90%" title="筛选" append-to-body>
        <el-form ref="form" size="small" label-width="100px" label-position="right">
            <el-form-item prop="pageparm" :label="formMap['pageparm']">
                <el-select class="form-select" v-model="params.pageparm" placeholder="请选择项目名称">
                    <el-option v-for="xx of projectCodes" :key="xx.xmdm" :value="xx.xmdm"
                               :label="xx.xmmc"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="alzt" :label="formMap['alzt']">
                <el-select class="form-select" v-model="params.alzt" placeholder="请选择案例状态">
                    <el-option v-for="xx of types.alzts" :key="xx.dmdm" :value="xx.dmdm"
                               :label="xx.dmmc"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="qxdm" :label="formMap['qxdm']">
                <el-cascader
                        :show-all-levels="false"
                        class="form-select" clearable
                        v-model="params.qxdm"
                        placeholder="请选择案例区县"
                        @change="handleChange"
                        :options="types.qxdms"
                        :props="{label: 'dmmc', value: 'dmdm', emitPath: false}"></el-cascader>
            </el-form-item>
            <el-form-item prop="xxdm" :label="formMap['xxdm']">
                <el-select :disabled="!params.qxdm" class="form-select" v-model="params.xxdm" clearable
                           placeholder="请选择案例所属学校">
                    <el-option v-for="xx of types.xxdms" :key="xx.dmdm" :value="xx.dmdm"
                               :label="xx.dmmc"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="text-align:center;margin-top: 15px">
            <el-button type="primary" size="small" @click="handleSubmit">查询</el-button>
            <el-button type="info" size="small" @click="handleSet">重置</el-button>
        </div>
    </el-dialog>

    <el-dialog :visible.sync="settingDialog.visible" width="90%" title="设置" append-to-body>
        <el-form ref="form" size="small" label-width="100px" label-position="right">
            <el-form-item prop="alzt" :label="formMap['alzt']">
                <el-select class="form-select" v-model="settingDialog.alzt" placeholder="请选择案例状态">
                    <el-option v-for="xx of types.alzts" :key="xx.dmdm" :value="xx.dmdm"
                               :label="xx.dmmc"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="text-align:center;margin-top: 15px">
            <el-button type="primary" size="small" @click="submitSetting">提交</el-button>
            <el-button type="info" size="small" @click="settingDialog.visible = false">取消</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="static/vue.js"></script>
<!-- import JavaScript -->
<script src="static/index.js"></script>
<script src="static/axios.min.js"></script>
<script>
    var pageparm = getQueryString("pageparm"),
        formMap = {
            pageparm: '项目名称',
            alzt: '案例状态',
            xxdm: '案例学校名称',
            qxdm: '案例区县名称'
        };
    new Vue({
        el: '#app',
        data: function () {
            var that = this
            return {
                title: '案例管理',
                editStatus: false,
                selection: [],
                formMap,
                loading: true,
                visible: false,
                right: {
                    A: true,
                    M: true,
                    D: true
                },
                projectCodes: [],
                types: {
                    qxdms: [],
                    xxdms: [],
                    alzts: []
                },
                pageparm: getQueryString('pageparm'),
                params: {
                    size: 8,
                    page: 1,
                    total: 0,
                    pageparm: getQueryString('pageparm'),
                    alzt: '',
                    qxdm: '',
                    xxdm: ''
                },
                settingDialog: {
                    visible: false,
                    alzt: ''
                },
                list: [],
                isMobile: !IsPC()
            }
        },
        computed: {
            noMore() {
                return this.list.length >= this.params.total
            },
            disabled() {
                return this.loading || this.noMore
            }
        },
        methods: {
            back() {
                history.back()
            },
            handleChange(val) {
                if (!val) {
                    this.types.xxdms = []
                } else {
                    this.getTypes('gb-xxdm', val)
                }
                this.params.xxdm = ''
            },
            cancelEdit() {
                this.selection.forEach(function (item) {
                    item.selected = false
                })
                this.selection = []
                this.editStatus = false
            },
            handleClickCard(row) {
                if (!this.editStatus) {
                    this.edit('show', row)
                } else {
                    row.selected = !row.selected
                    if (row.selected) {
                        this.selection.push(row)
                    } else {
                        this.selection = this.selection.filter(function (item) {
                            return item.alid !== row.alid
                        })
                    }
                }
            },
            submitSetting() {
                if (!this.settingDialog.alzt) {
                    this.$message.warning('请选择轮次')
                    return
                }

                var params = {
                    alid: this.selection.map(function (item) {
                        return item.alid
                    }).join(','),
                    alzt: this.settingDialog.alzt,
                    act: 'AsetZT'
                }, that = this
                axios.get(baseUrl + 'PSAL/PSALWLIST', {params}).then(function (res) {
                    if (res.status === 200) {
                        that.editStatus = false
                        that.settingDialog.visible = false
                        that.settingDialog.alzt = ''
                        if (that.isMobile) {
                            that.params.page = 1
                        }
                        that.$message.success('设置成功')
                        that.changePage()
                    }
                })
            },
            selectRow(rows) {
                this.selection = rows
            },
            openSettingDialog() {
                if (this.selection.length === 0) {
                    this.$message.warning('请选择要设置的数据')
                    return
                }
                this.settingDialog.visible = true
                this.settingDialog.lcdm = ''
                this.settingDialog.zuid = ''
            },
            goDocument(row) {
                location.href = './PSALDETAIDOC.html?alid=' + row.alid
            },
            deleteCase(row) {
                var that = this
                this.$confirm('是否确定删除' + row.almc + '?').then(function (flag) {
                    if (flag) {
                        var params = {
                            act: 'Delete',
                            alid: row.alid,
                            pageparm: that.params.pageparm
                        }
                        axios.get(baseUrl + 'PSAL/PSALWLIST', {params}).then(function (res) {
                            if (res.status === 200) {
                                if (that.isMobile) {
                                    that.params.page = 1
                                }
                                that.changePage()
                            }
                        })
                    }
                })
            },
            edit(type, row) {
                var url = './PSALDETAI.html?type=' + type
                if (type !== 'add') {
                    url = url + '&alid=' + row.alid
                } else {
                    url = url + '&redir=' + 'PSALWLIST'
                }
                location.href = url
            },
            getData() {
                var params = {
                    act: 'Rdata',
                    pagesize: this.params.size,
                    pageindex: this.params.page
                }
                for (var key in this.params) {
                    if (this.params.hasOwnProperty(key) && (typeof this.params[key] === 'string') && this.params[key]) {
                        params[key] = this.params[key]
                    }
                }
                return axios.get(baseUrl + 'PSAL/PSALWLIST' + pageparm, {
                    params: params
                })
            },
            loadData() {
                var that = this
                that.loading = true
                that.getData().then(function (res) {
                    if (res.status === 200 && res.data) {
                        var data = res.data
                        data.rows.forEach(function (item) {
                            item.selected = false
                            that.list.push(item)
                        })
                        that.params.total = data.total
                        that.params.page++
                    } else {
                        that.list = []
                    }
                    that.loading = false
                })
            },
            changePage() {
                var that = this
                that.loading = true
                that.getData().then(function (res) {
                    that.loading = false
                    if (res.status === 200) {
                        that.list = res.data.rows.map(function (item) {
                            item.selected = false
                            return item
                        })
                        that.params.total = res.data.total || []
                        if (that.isMobile) {
                            that.params.page++
                        }
                    }
                })
            },
            handleSubmit() {
                this.visible = false
                this.params.page = 1
                this.changePage()
            },
            handleSet() {
                this.params.page = 1
                this.params.pageparm = this.pageparm
                this.params.alzt = ''
                this.params.qxdm = ''
                this.params.xxdm = ''
                this.visible = false
                this.changePage()
            },
            getInitData() {
                let that = this
                axios.get(baseUrl + 'PSAL/PSALWLIST', {params: {act: 'pinit'}}).then(function (res) {
                    if (res.status === 200) {
                        that.title = res.data.mkmc || that.title
                        document.title = that.title
                        that.projectCodes = res.data.xmlist
                        that.pzluserid = res.data.pzluserid
                        that.pageparm = res.data.pageparm
                        if (res.data.rightid) {
                            for (var i = 0; i < res.data.rightid.length; i++) {
                                that.right[res.data.rightid[i]] = true
                            }
                        }
                        if (!that.params.pageparm) {
                            that.pageparm = that.projectCodes[0].xmdm
                            that.params.pageparm = that.projectCodes[0].xmdm
                        }
                        that.changePage()
                    }
                })
            },
            getTypes(type, dmleft) {
                let that = this
                return axios.get(baseUrl + 'xctrl/getdmjson/' + type, {params: {dmleft}}).then(function (res) {
                    if (res.status === 200) {
                        if (type === 'gb-qxdm') {
                            var qxdms = [], qxdmMap = {}, second = {}
                            res.data.forEach(function (item) {
                                var key = item.dmdm.substring(0, item.dmdm.length - 2)
                                if (item.dmdm.length === 2) { // 第一层逻辑
                                    if (!qxdmMap[item.dmdm]) {
                                        qxdmMap[item.dmdm] = {
                                            dmdm: item.dmdm,
                                            dmmc: item.dmmc,
                                            children: []
                                        }
                                    } else {
                                        qxdmMap[item.dmdm].dmdm = item.dmdm
                                        qxdmMap[item.dmdm].dmmc = item.dmmc
                                    }

                                } else if (item.dmdm.length === 4) { // 第二层逻辑
                                    if (!qxdmMap[key]) {
                                        qxdmMap[key] = {
                                            children: []
                                        }
                                    }
                                    if (!second[item.dmdm]) {
                                        second[item.dmdm] = {
                                            dmdm: item.dmdm,
                                            dmmc: item.dmmc,
                                            children: []
                                        }
                                    } else {
                                        second[item.dmdm].dmdm = item.dmdm
                                        second[item.dmdm].dmmc = item.dmmc
                                    }
                                    qxdmMap[key].children.push(second[item.dmdm])
                                } else {
                                    if (!second[key]) {
                                        second[key] = {
                                            children: []
                                        }
                                    }
                                    second[key].children.push({
                                        dmdm: item.dmdm,
                                        dmmc: item.dmmc
                                    })
                                }
                            })
                            for (var k in qxdmMap) {
                                if (qxdmMap.hasOwnProperty(k) && qxdmMap[k]) {
                                    qxdms.push(qxdmMap[k])
                                }
                            }
                            that.types[type.split('-')[1] + 's'] = qxdms
                        } else {
                            that.types[type.split('-')[1] + 's'] = res.data
                        }
                    }
                })
            },
            resize() {
                this.isMobile = window.innerWidth <= 768
            }
        },
        created() {
            this.getTypes('anli-alzt')
            this.getTypes('gb-qxdm')
            this.getTypes('gb-xxdm')
            this.getInitData()
        },
        mounted() {
            window.addEventListener('resize', this.resize)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.resize)
        }
    })
</script>

</html>